<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/4/25
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>学生管理系统</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- 引入css文件 -->
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 导入前端数据校验插件 -->
    <script
            src="https://cdn.staticfile.org/nice-validator/1.1.4/jquery.validator.min.js?local=zh-CN"></script>
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/css/Ajax_Main.css">
    <script src="<%=request.getContextPath()%>/js/student.js"></script>

</head>

<body>
<div class="top">
    <h2>您好！<%=request.getSession().getAttribute("username") %>管理员，欢迎使用学生学籍管理系统</h2>
</div>
<div class="bottom">
    <div class="index">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li class="active" id="stum"><a href="">学生管理</a></li>
                    <li id="infom"><a id="info">关于</a></li>
                    <li><a href="<%=request.getContextPath()%>/logout">退出登录</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="contain" id="contain">


        <div class="tableBody">
            <div class="panel panel-default">
                <div class="panel-heading">
                    查询条件
                </div>
                <div class="panel-body form-group" style="margin-bottom:0px;">
                    <label class="col-sm-2 control-label" style="text-align: right; margin-top:5px">姓名：</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" name="name" id="searchName"/>
                    </div>
                    <div class="col-sm-2 pull-left">
                        <button class="btn btn-primary" id="search_btn">查询</button>
                    </div>
                </div>
            </div>
            <table id="mytab" class="table table-hover"></table>
            <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
                <button id="btn_add" type="button" class="btn" data-toggle="modal" data-target="#stu-add" >
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
            </div>
        </div>

        <script>
            $(function(){
                //根据窗口调整表格高度
                $(window).resize(function() {
                    $('#mytab').bootstrapTable('resetView', {
                        height: tableHeight()
                    })
                })
                //生成用户数据
                $('#mytab').bootstrapTable({
                    method: 'get',
                    contentType: "application/x-www-form-urlencoded",
                    dataType:"json",
                    url:"<%=request.getContextPath()%>/getstudent",
                    height:tableHeight(),//高度调整
                    striped: true, //是否显示行间隔色
                    // dataField: "res",//获取数据的别名，先省略，则为你返回的
                    pageNumber: 1, //初始化加载第一页，默认第一页
                    pagination:true,//是否分页
                    queryParamsType:'limit',
                    queryParams:queryParams,
                    sidePagination:'server',//在服务器分页
                    pageSize:10,//单页记录数
                    // pageList:[5,10,20,30],//分页步进值
                    showRefresh:true,//刷新按钮
                    // showColumns:true,
                    clickToSelect: true,//是否启用点击选中行
                    toolbarAlign:'right',
                    buttonsAlign:'right',//按钮对齐方式
                    toolbar:'#toolbar',//指定工作栏
                    columns:[
                        {
                            title:'全选',
                            field:'select',
                            checkbox:true,
                            width:25,
                            align:'center',
                            valign:'middle'
                        },
                        {
                            title:'学号',
                            field:'id',
                            sortable:true
                        },
                        {
                            title:'姓名',
                            field:'name',
                            sortable:true
                        },
                        {
                            title:'性别',
                            field:'sex',
                            sortable:true
                        },
                        {
                            title:'出生年月',
                            field:'birth',
                            sortable:true
                        },
                        {
                            title:'入学时间',
                            field:'schoolday',
                        },{
                            title:'学院',
                            field:'college_id'
                        },
                        {
                            title:'专业',
                            field:'major_id'
                        },
                        {
                            title:'操作',
                            field:'Button',
                            align:'center',
                            events: operateEvents,//事件
                            formatter:AddFunctionAlty//添加按钮
                        }
                    ],
                    locale:'zh-CN',//中文支持,
                })

            })

            function tableHeight() {
                return $(window).height() - 140;
            }
            //列表行‘操作’按钮
            /**
             * @return {string}
             */
            function AddFunctionAlty(value, row, index) {
                return '<button id="TableView"  class="btn btn-primary btn-lg" data-toggle="modal" data-target="#stu-update">查看</button>'

            }
            //请求服务数据时所传查询参数
            function queryParams(params){
                return{
                    pageSize: params.limit,
                    pageNum: (params.offset / params.limit) + 1,
                    studentname: $("#searchName").val()
                }
            }
            //点击新增按钮事件
            window.operateEvents = {
                "click #TableView": function (e, value, row, index) {
                    var id =row.id;
                    var url = "getstudent?id=" + id;
                    $.get(url, function(data, status) {
                        var stu = JSON.parse(data);
                        $("#stu-update-form div #stu-id").val(stu.id);
                        $("#stu-update-form div #stu-name").val(stu.name);
                        if (stu.sex == 0) {
                            $("#stu-update-form div  #stu-sex").html("");
                            $("#stu-update-form div #stu-sex").append("<option value='0' selected='selected'>女</option><option value='1'>男</option>");
                        } else {
                            $("#stu-update-form div #stu-sex").html("");
                            $("#stu-update-form div #stu-sex").append("<option value='0' >女</option><option value='1' selected='selected'>男</option>");
                        }
                        $("#stu-update-form div #birth ").val(stu.birth);
                        $("#stu-update-form div #schoolDay").val(stu.schoolday);
                        $("#stu-update-form div #major").html("");
                        $("#stu-update-form div #major").append("<option selected='selected' value='" + stu.major_id + "'></option></select>");
                        $("#stu-update-form div #college").html("");
                        $("#stu-update-form div #college").append("<option selected='selected' value='" + stu.college_id + "'></option></select>");
                        //请求获取学院列表
                        $.get("getCollege", function(data, status) {
                            var college = data;
                            var res = "";
                            var collegeValue = $("#stu-update-form div #college").val();
                            for (var i = 0; i < college.length; i++) {
                                if (college[i].name == collegeValue) {
                                    res += "<option value='" + college[i].id + "' selected='selected'>" + college[i].name + "</option>";
                                } else {
                                    res += "<option value='" + college[i].id + "'>" + college[i].name + "</option>";
                                }
                            }
                            $("#stu-update-form div #college").html("");
                            $("#stu-update-form div #college").append(res);
                            var collegeId = $("#stu-update-form div #college").val();

                            $.get("getMajor?collegeId=" + collegeId, function(data, status) {
                                var major = data;
                                var res = "";
                                var majorValue = $("#stu-update-form div #major").val();
                                for (var i = 0; i < major.length; i++) {
                                    if (major[i].name == majorValue) {
                                        res += "<option value='" + major[i].id + "' selected='selected'>" + major[i].name + "</option>";
                                    } else {
                                        res += "<option value='" + major[i].id + "'>" + major[i].name + "</option>";
                                    }
                                }
                                $("#stu-update-form div #major").html("");
                                $("#stu-update-form div #major").append(res);
                            });
                        });
                    });
                }
            }
            $(function () {
                /*
             * 学院按钮改变时
             * 当选中学院下拉菜单中的一项时，通过Ajax加载相对应的学院专业
             */
                $("#college").change(function() {
                    var collegeId = $(this).val();
                    $("#major option:not(:first)").remove();
                    $.get("getMajor?collegeId=" + collegeId, function(data, status) {
                        var major = data;
                        var res = "";
                        for (var i = 0; i < major.length; i++) {
                            res += "<option value='" + major[i].id + "'>" + major[i].name + "</option>";
                        }
                        $("#major").append(res);
                    });
                });
                //关于
                $('#info').click(function () {
                    $('#stum').attr("class","");
                    $('#infom').attr("class","active");
                    $('#contain').load("info.html");
                });
                //学生删除
                $('#stu-del').click(function () {
                    var id=$("#stu-update-form div #stu-id").val();
                    $.get("deletstudent?id=" + id, function(data, status) {
if(data=="ok"){
    alert("删除成功！");
    $("#stu-update").modal('hide');
    $("#mytab").bootstrapTable("refresh");
}else if(data=="err"){
    alert("删除失败！");
    $("#stu-update").modal('hide');
}else {
    alert("删除失败！"+data);
    $("#stu-update").modal('hide');
}
                    });
                });
                //查询按钮事件
                $('#search_btn').click(function () {
                    $('#mytab').bootstrapTable('refresh', {url: '<%=request.getContextPath()%>/getstudent'});//url为后台action
                })

                $("#btn_add").on("click", function() {
                    $.get("getCollege", function(data, status) {
                        var college = data;
                        $("#college").html("");
                        var res ="<option value=''>---请选择---</option>";
                        for (var i = 0; i < college.length; i++) {
                            res += "<option value='" + college[i].id + "'>" + college[i].name + "</option>";
                        }
                        $("#college").append(res);
                    });
                });

            })

            $(function () {
                /*
 * 添加学生表单的表单验证
 * 使用了第三方插件 nice-validator 进行表单的前端验证，只有验证通过才能使用Ajax提交表单
 */
                $("#stu-add-form,#stu-update-form").validator({
                    rules : {
                        //自定义规则
                        idType : [ /^\d+/, "学生学号必须为纯数字" ],
                        idLength : [ /^\d{10}$/, "学生学号长度必须为10位" ],
                        nameValidate : [ /[\u4e00-\u9fa5_a-zA-Z_]+/, "学生姓名必须是中文或者英文" ],
                    },
                    fields : {
                        //表单应用规则
                        'id' : "required;idType;idLength",
                        'name' : "required;nameValidate",
                        'sex' : "required",
                        'birth' : "required",
                        'schoolDay' : "required",
                        'major_id' : "required",
                        'college_id' : "required"
                    },
                    //验证通过后需要执行的方法
                    valid : $("#stu-add-input").click(function() {
                        $.post("addStudent", $("#stu-add-form").serialize(), function(data, status) {
                            if (data == "ok") {
                                alert("添加成功!");
                                $("#stu-add").modal('hide');
                                $(".modal-backdrop").remove();
                                var path = $("#path").val();
                                $("#mytab").bootstrapTable("refresh");
                            } else {
                                alert("服务器出现未知错误，添加失败!");
                            }
                        });
                    }),
                    valid : $("#stu-update-input").click(function() {
                        $.post("updateStudent", $("#stu-update-form").serialize(), function(data, status) {
                            if (status == "success") {
                                alert("修改成功!");
                                $("#stu-update").modal('hide');
                                $(".modal-backdrop").remove();
                                var path = $("#path").val();
                                $("#mytab").bootstrapTable("refresh");

                            } else {
                                alert("服务器出现未知错误，添加失败!");
                            }
                        });
                    })
                });
            });


        </script>


    </div>
</div>


<!-- 学生添加模态框 -->
<div class="modal fade" id="stu-add">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">添加学生资料</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <form action="" id="stu-add-form" method="post">
                    <div>
                        <label for="stu-id">学生学号:</label><input type="text" name="id"
                                                                id="stu-id">
                    </div>
                    <div>
                        <label for="stu-name">学生姓名:</label><input type="text" name="name"
                                                                  id="stu-name">
                    </div>
                    <div>
                        <label for="stu-sex">学生性别:</label> <select id="stu-sex"
                                                                   name="sex">
                        <option value="">---请选择---</option>
                        <option value="0">女</option>
                        <option value="1">男</option>
                    </select>
                    </div>
                    <div>
                        <label for="birth">出生日期:</label><input type="date" name="birth"
                                                               id="birth">
                    </div>
                    <div>
                        <label for="schoolDay">入学日期:</label><input type="date"
                                                                   name="schoolday" id="schoolDay">
                    </div>
                    <div>
                        <label for="college">所属学院:</label><select id="college"
                                                                  name="college_id"><option selected="selected" value="">---请选择---</option></select>
                    </div>
                    <div>
                        <label for="major">所属专业:</label><select id="major"
                                                                name="major_id"><option selected="selected" value="">---请选择---</option></select>
                    </div>

                </form>

            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button class="btn btn-primary" id="stu-add-input">提交</button>
            </div>

        </div>
    </div>
</div>

<!-- 学生修改模态框 -->
<div class="modal fade" id="stu-update">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">更新学生资料</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <form action="" id="stu-update-form" method="post">
                    <div>
                        <label for="stu-id">学生学号:</label><input type="text" name="id"
                                                                id="stu-id" readonly="readonly">
                    </div>
                    <div>
                        <label for="stu-name">学生姓名:</label><input type="text" name="name"
                                                                  id="stu-name">
                    </div>
                    <div>
                        <label for="stu-sex">学生性别:</label> <select id="stu-sex"
                                                                   name="sex">
                        <option value="">---请选择---</option>
                        <option value="0">女</option>
                        <option value="1">男</option>
                    </select>
                    </div>
                    <div>
                        <label for="birth">出生日期:</label><input type="date" name="birth"
                                                               id="birth">
                    </div>
                    <div>
                        <label for="schoolDay">入学日期:</label><input type="date"
                                                                   name="schoolday" id="schoolDay">
                    </div>
                    <div>
                        <label for="college">所属学院:</label><select id="college"
                                                                  name="college_id"></select>
                    </div>
                    <div>
                        <label for="major">所属专业:</label><select id="major"
                                                                name="major_id"></select>
                    </div>

                </form>

            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button class="btn btn-primary" id="stu-update-input">修改</button>
                <button class="btn btn-danger" id="stu-del">删除</button>
            </div>

        </div>
    </div>
</div>
</body>
</html>